import "./homesort.css"
import { getCategoryData, getMaterialData } from "../../api/home"
import React from "react"
import { Link, useNavigate } from "react-router-dom"

function Homesort() {
    let navigate = useNavigate();//链接跳转
    let [category, setCategory] = React.useState(null);
    let [material, setMaterial] = React.useState(null);


    let [indexs, editIndex] = React.useState(1);
    const indexEdit = () => {
        // console.log("是");
        editIndex(1)
        // console.log(indexs);
    }
    //请求数据 菜谱
    React.useEffect(() => {
        getCategoryData().then(data => {
            setCategory(data.data.data)
            // setCategorylist(data.data.data.data)
            // console.log(data.data);
        })
    }, [])

    //请求数据 食材
    React.useEffect(() => {
        getMaterialData().then(data => {
            setMaterial(data.data.data)
            // setCategorylist(data.data.data.data)
            // console.log(data.data.data);
        })
    }, [])

    return (
        <div className="homesort">

            {/* 顶部 */}
            <div className="top">
                <i onClick={() => navigate("/")} className="iconfont icon-zuobian"></i>
                <div className="tabs">
                    <ul>

                        <li className={indexs == 1 ? "active" : ""} onClick={() => { editIndex(1) }}>菜谱</li>
                        <li onClick={() => { editIndex(2) }} className={indexs == 2 ? "active" : ""} >食材</li>
                    </ul>
                </div>
                <i className="iconfont icon-sort"></i>
            </div>

            {/* 分类 */}

            <div className={indexs == 1 ? 'j-page' : 'display'}>
                <div className="line"></div>
                {
                    category && category.map(item => {
                        return (
                            <div className="catalog" key={item.id}>
                                <p>{item.text}</p>
                                <div className="lists">

                                    <ul>
                                        {
                                            item.image ? (<div className="img">
                                                <img src={item.image} />
                                            </div>) : ("")
                                        }
                                        {
                                            item.data.map(data => {
                                                return (
                                                    <li key={data.id}>
                                                        <Link to={'/detailstype/'+ data.id} href="">{data.text}</Link>
                                                    </li>
                                                )
                                            })
                                        }
                                    </ul>
                                </div>
                            </div>
                        )
                    })
                }
            </div>

            <div className={indexs == 2 ? 'j-page' : 'display'}>
                <div className="line"></div>
                {
                    material && material.map(item => {
                        return (
                            <div className="catalog" key={item.id}>
                                <a href=""><p>{item.text}</p></a>
                                <div className="lists">
                                    <ul>


                                        {
                                            item.image ? (<div className="img">
                                                <img src={item.image} />
                                            </div>) : ("")
                                        }

                                        {
                                            item.data.map(data => {
                                                return (
                                                    <li key={data.id}>
                                                        <Link to={'/detailssort/' + data.id}>{data.text}</Link>
                                                    </li>
                                                )
                                            })
                                        }
                                    </ul>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

export default Homesort;

